<template>
  <div class='wrapper'>
    <div class="detail-header">
      <h1 class="title">卓越东部蔚蓝海岸</h1>
      <p class="price"><span class="price-bolder">18000</span>元/平</p>
    </div>
    <div class="house-detail">
      <i class="iconfont float-right" @click='ShowClick'>&#xe7b2;</i>
      <div class="keyword" ref="heightShow">
        <span class="house-label label-quality">严选</span>
        <span class="house-label label-sale">在售</span>
        <span class="house-label">住宅</span>
        <span class="house-label">车位充足</span>
        <span class="house-label">高绿化</span>
        <span class="house-label">低容几率</span>
        <span class="house-label">超大社区</span>
        <span class="house-label">小户型</span>
        <span class="house-label">入选评论榜1名</span>
      </div>
    </div>
    <div class="detail-attention-box">
      该楼盘已有1000+找房客户关注；打败了惠州99.57%的楼盘
    </div>
    <ul class="detail-list">
      <li class="item">
        <span class="item-a">参考总价：</span>
        <p class="item-b">42万/套</p>
      </li>
      <li class="item">
        <span class="item-a">建筑面积：</span>
        <p class="item-c">35-35㎡</p>
      </li>
      <li class="item">
        <p class="item-a">楼盘地址：</p>
        <p class="item-c">惠阳区 惠州惠阳区沙田镇金桔自然保护区沙田镇金桔自然保护区沙田镇金桔自然保护区沙田镇田镇金桔自然保护区沙田镇田镇金桔自然保护区沙田镇田镇金桔自然保护区沙田镇田镇金桔自然保护区沙田镇金桔自然保护区</p>
        <span class="iconfont">&#xe60a;</span>
      </li>
    </ul>
    <ul class="detail-item">
      <li class="detailed-list">
        <span class="list-title">最近开盘</span>
        <p class="list-txt">2017-10-21</p>
      </li>
      <li class="detailed-list">
        <span class="list-title">最近交房时间</span>
        <p class="list-txt">2018-12-31</p>
      </li>
      <li class="detailed-list">
        <span class="list-title"><i class="iconfont">&#xe622;</i>计算器</span>
        <p class="list-txt">参考首付<br>12万</p>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'Contents',
    data () {
      return {
        keyword: 'keyword',
        isShow:false
      }
    },
    // 方法
    methods: {
      // 描述展开 隐藏,(点击元素 添加类名，或者去掉类名)
      ShowClick () {
        const btn = this.$refs.heightShow
        console.log(btn.className)
        if (btn.className === 'keyword') {
          btn.className = ' '
        } else {
          btn.className = 'keyword'
        }
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .wrapper
    wrapper()

  .detail-header
    display flex
    flex-direction column
    margin-top .3rem

  .title
    font-size .54rem
    font-weight bolder


  .price
    color #ff9100
    font-size .44rem
    margin-top .2rem


  .price-bolder
    font-weight bolder

  .house-detail
    display flex
    max-height 1.68rem
    overflow hidden
    font-size .03rem
    margin-top .3rem
    position relative

  .float-right
    position absolute
    top .03rem
    right 0

  .keyword
    height .56rem
    overflow hidden

  .keyword span
    line-height .426667rem !important


  .house-label
    line-height .426667rem !important
    color #9ba6aa
    border-radius .053333rem
    margin-right .133333rem
    display inline-block
    margin-bottom .16rem
    background #eaeff7
    padding 0 .08rem

  .label-quality
    background #504f5e
    color #f1ddb5

  .label-sale
    border .02rem solid #a3c512
    background none
    color #a3c512

  .detail-attention-box
    background #f4f4f4
    height .8rem
    line-height .8rem
    text-align center
    // 字体溢出 1行 隐藏
    overflowEllipsis()

  .detail-list
    display flex
    flex-direction column
    justify-content space-around

  .item
    display flex
    line-height .5rem
    display flex


  .item .item-a
    color #798089

  .item .item-b
    color #ff9100
    font-weight 700

  .item .item-c
    flex 1
    color #333
    font-weight 700
    font-size .1rem
    overflowEllipsis()

  .detail-item
    margin-top .4rem
    display flex
    justify-content space-between

  .detailed-list
    width 2rem
    height 1.8rem
    display flex
    flex-direction column
    align-items center
    //背景阴影
    BackgroundShadow()
    background none


  .list-title
    font-size .2rem
    line-height .346667rem
    font-weight 900
    color #2f3c4d
    margin-top .3rem
    margin-bottom .4rem

  .list-txt
    display flex
    font-size .2rem
    line-height .346667rem
    color #2f3c4d
    padding 0 .1rem
    justify-content center
    align-items center
    text-align center


</style>
